﻿<div class="ui-widget-content">
	<h3>Efeitos Animados - Transições de Visibilidade</h3>
	<p>Animar a "aparição" de um elemento:</p>
	<div style="float: left;">


        <div>
            <a id="botao_visibilidade_sintaxe" href="#">Sintaxes</a>
            <div id="dialog_visibilidade_sintaxe" title="show, hide, toggle" style="display: none;" class="dialog_apresentacao">
            <p>Métodos:</p>
            <ul>
              <li>show</li>  
              <li>hide</li>  
              <li>toggle</li>  
            </ul>
            <br/>
            <p>Sintaxe:</p>
            <pre>$( seletor ).show( 
  efeito, 
  [opcoes_do_efeito],
  [velocidade],
  [callback]
);</pre>

            <br/>
            <p>Exemplo utilizado no slide:</p>
            <pre>$( "#caixa_animada" ).show( 
  "size",
  { to: { width: 70, height: 100 } }, 
  500, 
  function() { ... };
);</pre>

            </div>
        </div>

    <p>
        <span id="radio_efeito_visibilidade">
            <input type="radio" id="radio_efeito_show" name="radio_efeito" value="show" checked="checked"/>
            <label for="radio_efeito_show">Show</label>
            <input type="radio" id="radio_efeito_hide"  name="radio_efeito" value="hide" />
            <label for="radio_efeito_hide">Hide</label>
            <input type="radio" id="radio_efeito_toggle"  name="radio_efeito" value="toggle"/>
            <label for="radio_efeito_toggle">Toggle</label>

        </span>
    </p>


    </div>
    
    <div style="float: left; margin-left: 80px; height: 150px; ">
        <div id="caixa_animada_show" class="draggable_azul">
        	<div style="margin: 50px; text-align: center;"><p>Eu sou uma caixa animada!</p></div>
        </div>
    </div>
    <div style="clear: both;" />    
	
    <p>
        Exemplos:
        <div id="botoes_de_efeitos_show" class="ui-widget-content" style="padding: 5px">
			<input type="button" value="blind" />
			<input type="button" value="bounce"/>
			<input type="button" value="clip"/>
			<input type="button" value="drop"/>
			<input type="button" value="explode"/>
			<input type="button" value="fold"/>
			<input type="button" value="highlight"/>
			<input type="button" value="puff"/>
			<input type="button" value="pulsate"/>
			<input type="button" value="scale"/>
			<input type="button" value="shake"/>
			<input type="button" value="size"/>
			<input type="button" value="slide"/>			
		</div>
		
	</p>
    

    
    
    <style type="text/css" rel="stylesheet">
		#caixa_animada_show { width: 400px; padding: 5px; margin: 5px auto; float: left; position: relative;  }
	</style>
    
    <script type="text/javascript">
        inicializador.efeitosTransicoesShow = function() {
        
        var optionsToSize  = { to: { width: 70, height: 100 } };
        var optionsToScale = { percent: 100 };
            
    		var executaEfeitoShow = function( efeito ) {
          		// callback function to bring a hidden box back
          		function callback_do_efeito_show() {
          			setTimeout(function() {
          				$( "#caixa_animada_show" ).removeAttr( "style" ).hide();
                  $( "#botoes_de_efeitos_show input" ).button("enable");
          			}, 1000 );
          		};

          		function callback_do_efeito_hide() {
          			setTimeout(function() {
               		$( "#caixa_animada_show" ).removeAttr( "style" ).show();
                  $( "#botoes_de_efeitos_show input" ).button("enable");
          			}, 1000 );
          		};

          		function callback_do_efeito_toggle() {
          			setTimeout(function() {
                  $( "#botoes_de_efeitos_show input" ).button("enable");
          			}, 1000 );
          		};

      			// A maioria dos efeitos não necessitam parametros...
      			var options = {};
      			// ...no entanto alguns exigem.
      			if ( efeito === "scale" ) {
      				options = optionsToScale;
      			} else if ( efeito === "size" ) {
      				options = optionsToSize;
      			}

            var metodo = $("#radio_efeito_visibilidade :checked").val();

      			$( "#caixa_animada_show p" ).text( efeito );

      			// Executa o efeito.
      			if ( metodo === "show" ) {
          			$( "#caixa_animada_show" ).show( efeito, options, 500, callback_do_efeito_show );
      			} else if ( metodo === "hide" ) {
          			$( "#caixa_animada_show" ).hide( efeito, options, 500, callback_do_efeito_hide );
      			} else if ( metodo === "toggle" ) {
          			$( "#caixa_animada_show" ).toggle( efeito, options, 500, callback_do_efeito_toggle );
      			}

    		};

        $( "#botoes_de_efeitos_show input" ).button().click(function() {
            $( "#botoes_de_efeitos_show input" ).button("disable");
            executaEfeitoShow( $(this).val() );
            return false;
        });

    		$( "#caixa_animada_show" ).hide();

        $("#radio_efeito_visibilidade").button();
        $("#radio_efeito_visibilidade input:radio").button().buttonset();

        $("#radio_efeito_show").click(function() {
              optionsToSize = { to: { width: 70, height: 100 } };
              optionsToScale = { percent: 100 };
	            $( "#caixa_animada_show" ).hide();
  	    });
        $("#radio_efeito_hide").click(function() {
              optionsToSize = { to: { width: 0, height: 0 } };
              optionsToScale = { percent: 0 };
	            $( "#caixa_animada_show" ).show();
  	    });


        $("#botao_visibilidade_sintaxe").button().click(function() {
            $("#dialog_visibilidade_sintaxe").dialog({
                  width: 700, height: 750, modal: true , 
                  buttons: { "Fechar": function() { $(this).dialog("close"); } }
              });
        });

     }
    </script>
</div>
